<template>
  <div>
    <h4>注册</h4>
    <div v-show="showHint" class="hint_word">
      <p v-model="errHint">用户名已存在</p>
    </div>
    <div>
      <input class="sline" v-model="username" type="text" placeholder="请输入用户名"/>
      <input class="sline" v-model="password" type="password" placeholder="请输入密码"/>
      <button @click="register" class="sline bg-main">注册</button>
      <button @click="goLogin" class="sline bg-clear">已有账号，马上登录</button>
      <router-link to="/login">Go to login</router-link>
    </div>
  </div>
</template>

<script>
  export default {
    name: "register",
    data() {
      return {
        username: '',
        password: '',
        showHint: false,
        errHint: '密码错误'
      }
    },
    methods: {
      register: function () {

      },
      goLogin: function () {
        this.$router.push('login')
      }
    }
  }
</script>

<style scoped>
  .hint_word {
    color: red;
    font-size: 10px;
  }

  .sline {
    display: block;
    margin: 10px auto;
    width: 200px;
    height: 30px;
  }

  .bg-clear{
    border: none;
    background: none;
  }

  .bg-main {
    background: mediumseagreen;
    color: white;
    padding: 5px;
    border: none;
  }
</style>
